<template>
  <div class="check">
    <div class="header" style="background-color: #F3F3F3; overflow: hidden">
      <span class="c1">优惠券查询</span>
      <el-button class="return" icon="el-icon-arrow-left" @click="returnPage">返回</el-button>
    </div>

    <div class="container" style="background-color: #F3F3F3; overflow: hidden">
      <span class="c2 el-icon-search">筛选查询</span>
    </div>

    <div class="container2">
      <div class="couponName">
        用户账号：
        <el-input type="text" v-model="IdAndAccount" placeholder="用户ID/账号" style="width: 180px;" @change="getScreen()"></el-input>
      </div>
      <div class="userName">
        用户昵称：
        <el-input type="text" v-model="nickname" placeholder="用户昵称" style="width: 180px;" @change="getScreen()"></el-input>
      </div>
      <div class="cz">
        <el-button @click="cz()">重 置</el-button>
      </div>
    </div>

    <div class="foot" style="background-color: #F3F3F3; overflow: hidden">
      <span class="c2 el-icon-menu">数据列表</span>
    </div>

    <div class="foot1">
      <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                border @filter-change="tableChange"
                style="width: 100%" :default-sort="{prop: 'couponCode', order: 'descending'}">
        <el-table-column fixed type="selection" width="60" align="center"/>
        <el-table-column prop="userId" label="用户ID" width="100" align="center" sortable/>
        <el-table-column prop="account" label="用户账号" width="150" align="center"/>
        <el-table-column prop="nickname" label="用户昵称" width="200" align="center"/>
        <el-table-column prop="uss" label="已使用" width="180" align="center" sortable/>
        <el-table-column prop="unused" label="未使用" width="180" align="center" sortable/>
        <el-table-column prop="cou" label="已过期" width="180" align="center" sortable/>
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template slot-scope="scope">
            <router-link to="/coupon/check/details" style="text-decoration: none;color: #66B1FF">
              <el-button @click="detail(scope.row)" type="text" size="small"> 查看明细</el-button>
            </router-link>
            <el-button @click="giving(scope.row)" type="text" size="small">赠送优惠券</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="page">
        <el-pagination
            align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[3,5,7,9]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length" class="page2">
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "checkCoupon",
  data(){
    return{
      tableData:[],//列表数据
      couponName:'',
      userName:'',
      IdAndAccount:'',//用户账号
      nickname:'',//用户昵称
      currentPage: 1, // 当前页码
      total: 1, // 总条数
      pageSize: 5, // 每页显示几条
    }
  },
  mounted(){
    this.getList();
  },
  methods:{
    getList(){
      this.$http.post('/coupon/getCouponUser').then(res => {
        this.tableData = res.data;
        console.log(this.tableData);
        console.log(res.data);
        console.log('请求成功')
      }).catch(error => {  // 请求失败
        console.log('请求失败123');
        console.log(error);
      })
    },
    tableChange(filters) {
      console.log(filters);
      console.log('筛选条件变化');
      //这里根据filters，请求新数据可以实现服务器端筛选。
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    //筛选查询
    getScreen(){
      let data = 'userAccount='+this.IdAndAccount+'&nickname='+this.nickname
      this.$http({
        method: 'post',
        url: '/coupon/getScreen2',
        data:data
      }).then(res => {
        this.tableData = res.data;
        console.log('请求成功');
      }).catch(error => {  // 请求失败
        console.log('请求失败123');
        console.log(error);
      })
    },
    //返回
    returnPage(){
      if (window.history.length <= 1) {
        this.$router.push({ path: "/system/storageManagement" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    //重置按钮
    cz() {
      this.IdAndAccount = '',
      this.trueName = '',
      this.getList();
    },
    //查看明细按钮,根据ID查看优惠券明细
    detail(row) {
      // console.log(row.userId);
      var userId = row.userId;
      this.$store.commit('details',userId);
    },
    //赠送优惠券
    giving(row) {

    }

  }
}
</script>

<style scoped>
.check {
  background-color: #F6F7F9;
  height: 100%;
  margin: 0px -20px 0px -40px;
}
.header {
  margin: -20px 0px 0px 20px;
  height: 60px;
  border: 1px solid #E5E5E5;
}

.c1 {
  float: left;
  line-height: 40px;
  margin: 10px 0px 0px 20px;
}

.return {
  margin: 10px 0px 0px 900px;
}

.container {
  margin: 20px 80px 0px 20px;
  height: 60px;
  border: 1px solid #E5E5E5;
}

.c2 {
  float: left;
  margin: 20px 0px 0px 30px;
}

.container2 {
  margin: 0px 80px 0px 20px;
  height: 70px;
  background-color: #FFFFFF;
  border: 1px solid #E5E5E5;
}

.cz {
  margin: -40px -780px 0px 0px;
}

.couponName{
  margin: 15px 700px 0px 0px;
}

.userName{
  margin: -40px -140px 0px 0px;
}

.foot {
  margin: 20px 80px 0px 20px;
  height: 60px;
  border: 1px solid #E5E5E5;
}

.foot1 {
  margin: 0px 80px 0px 20px;
  height: 60px;
  border: 1px solid #E5E5E5;
}

.c2 {
  float: left;
  margin: 20px 0px 0px 30px;
}

.page {
  border: 1px solid #E5E5E5;
  margin: -1px 0px 0px 0px;;
}

.page2 {
  margin: 0px 0px 0px 420px;
}
</style>